<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>

    // 每隔5s开启一个计时器 => 倒计时5秒关闭 => 再开启下一个

    // 每隔5s开启一个计时器
    // var timer = setInterval(function(){

    //     // 倒计时5秒关闭
    //     var count = 5;
    //     console.log("开始倒计时5s:",count);
    //     var timer1 = setInterval(function(){
    //         count --;
    //         console.log(count);
    //         if(count == 1){
    //             clearInterval(timer1);
    //         }
    //     },1000);
    // },5000)


    // 一般情况下 不建议计时器嵌套计时器 => 如果外层计时器间隔时间较短 它不会等内层计时器执行完毕 而是直接开启下一次   => 不好控制

    // 每隔2s开启一个计时器 => 倒计时5秒关闭 => 再开启下一个
    // 每隔2s开启一个计时器
    // var timer = setInterval(function(){

    //     // 倒计时5秒关闭
    //     var count = 5;
    //     console.log("开始倒计时5s:",count);
    //     var timer1 = setInterval(function(){
    //         count --;
    //         console.log(count);
    //         if(count == 1){
    //             clearInterval(timer1);
    //         }
    //     },1000);
    // },2000)


    // 解决方法: 延时器改计时器  => 递归调用函数本身,实现延时器改计时器

    // 延迟2s 执行一段内容=> 开启5s倒计时  => 倒计时关闭后在重复此操作
        
    var timer = null;
    var timer1 = null;

    function loop() {
        // 延迟2s 执行一段内容
        timer = setTimeout(function () {
            // 倒计时5秒关闭
            var count = 5;
            console.log("开始倒计时5s:", count);
            timer1 = setInterval(function () {
                count--;
                console.log(count);
                if (count == 1) {
                    clearInterval(timer1);
                    loop();
                }
            }, 1000);
        }, 2000);
    }




</script>

</html>